<template>
    <div class="main">
        <div class="top pointer" @click="clickSkipDonation"></div>
        <el-empty description="暂无数据" :image-size="200" v-if="!state.list.length" />
        <div class="list" v-if="state.list.length">
            <div class="tip">
                <img src="/src/assets/image/gdb.png">
            </div>
            <div class="list-box">
              <vue3-seamless-scroll hover :list="state.list" class="scroll" :step="0.5">
                <div class="item pointer" v-for="(item, index) in state.list" :key="index">{{ item.title }}</div>
              </vue3-seamless-scroll>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getMeritRankingList } from '@/api/index/index'

const state = reactive({
    list: []
})

// 请求功德榜
const getMeritRankingListData = async () => {
    const res = await getMeritRankingList({ limit: 5 ,pageSize: 999})
    if (res.code == 200) {
        state.list = res.data
        state.list.forEach(item => {
            item.title = item.name + (item.generation||'-') + (item.firstName||'-') + (item.lastName||'-') + '捐款了' + item.price + '元'
        })
    }
}

onMounted(() => {
    getMeritRankingListData()
})

// 跳转捐款
const router = useRouter()
const clickSkipDonation = () => {
    router.push({
        path: '/donation',
        query: {
            type: 0
        }
    })
}
</script>

<style lang="scss" scoped>
.main {
    .top {
        background: url(../../../assets/image/gdjk.png) no-repeat;
        background-size: cover;
        width: 381px;
        height: 87px;
        border-radius: 5px;
    }

    .list {
        padding: 17px 23px;
        background-color: $web-bg;
        border-radius: 5px;
        margin-top: 30px;

        .list-box {
            max-height: 163px;
            overflow: scroll;

            .item:hover {
                color: $primary-color;
            }

            .item {
                padding: 14px 20px;
                background: #FFFFFF;
                border-radius: 5px;
                font-family: MicrosoftYaHei;
                font-size: 14px;
                color: #000000;
                margin-bottom: 10px;
            }
        }

        .tip {
            img {
                width: 114px;
                height: 36px;
            }
        }


    }
}
</style>